<template>
  <div class="container">
    <div class="head">
      <!-- intro -->
      <div class="intro">
        <div class="apply">
          <div class="text">申请日期</div>
          <div v-if="baseData" class="time">
            {{ baseData.applicant.apply_date }}
          </div>
        </div>
        <div class="info">
          <div class="info-base">
            <div v-if="baseData" class="name">
              {{ baseData.applicant.apply_username }} |
              <span class="department">{{
                baseData.applicant.apply_department
              }}</span>
            </div>
            <div v-if="baseData" class="phone">
              {{ baseData.applicant.apply_phone }}
            </div>
          </div>
          <div v-if="baseData" class="info-name">
            {{ baseData.applicant.nameinfo }}
          </div>
        </div>
      </div>
      <!-- tabs -->
      <!-- <div class="service-tabs">
        <div class="item" :class="type == 'base' ? 'active' : ''" @click="type = 'base'">基本信息</div>
        <div class="item" :class="type == 'demand' ? 'active' : ''" @click="type = 'demand'">需求分解</div>
        <div class="item" :class="type == 'workload' ? 'active' : ''" @click="type = 'workload'">工作量评估</div>
        <div class="item" :class="type == 'annex' ? 'active' : ''" @click="type = 'annex'">附件信息</div>
      </div> -->
    </div>
    <van-tabs
      v-model="activeName"
      color="#009966"
      swipe-threshold="4"
      background="#fff"
      line-width="20px"
      line-height="2"
      title-active-color="#009966"
      title-inactive-color="#313541"
    >
      <van-tab name="a" title="基本信息">
        <serviceBase :id="id" />
      </van-tab>
      <van-tab v-if="showTabs.requirement_decompose" name="b" title="需求分解">
        <serviceDemand
          :id="id"
          :baseData = "baseData.applicant"
          :currentNode="currentNodeId"
        />
      </van-tab>
      <van-tab
        v-if="
          showTabs.workload_assessment &&
          currentNodeId != 'T10340' &&
          currentNodeId != 'T10077'
        "
        name="c"
        title="工作量评估"
      >
        <serviceWorkload
          :id="id"
          :currentNode="currentNodeId"
        />
      </van-tab>
      <van-tab v-if="showTabs.network_hardware" name="d" title="网络处硬件评估">
        <serviceHardware
          :id="id"
          :currentNode="currentNodeId"
        />
      </van-tab>
      <van-tab v-if="showTabs.requirement_statistics" name="e" title="需求汇总">
        <serviceGather
          :id="id"
          :currentNode="currentNodeId"
        />
      </van-tab>
      <van-tab v-if="showTabs.requirement_analysis" name="f" title="需求分析">
        <serviceAnalysis
          :id="id"
          :baseData = "baseData.applicant"
          :currentNode="currentNodeId"
        />
      </van-tab>
      <van-tab v-if="showTabs.user_check" name="g" title="用户验收">
        <serviceAcceptance
          :id="id"
          :currentNode="currentNodeId"
        />
      </van-tab>
      <van-tab v-if="showTabs.system_online" name="h" title="上线信息">
        <serviceOnline
          :id="id"
          :currentNode="currentNodeId"
        />
      </van-tab>
      <!-- <van-tab name="r" title="附件信息">
        <serviceAnnex :id='id' />
      </van-tab> -->
    </van-tabs>
    <!-- <div class="service-content">
      <serviceBase v-show="type == 'base'" :id='id'/>
      <serviceDemand v-show="type == 'demand'" :id='id'/>
      <serviceWorkload v-show="type == 'workload'" :id='id' />
      <serveceAnnex v-show="type == 'annex'" />
    </div>  -->
    <!-- <div class="form-btn">
      <div class="btn btn-color1" @click="handleMoreOpera">更多操作</div>
      <div class="btn btn-color2">保存</div>
      <div class="btn btn-color3" @click="submit">提交</div>
    </div>
    <van-action-sheet
      v-model="showMoreOpera"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    /> -->
    <goback></goback>
  </div>
</template>
<script>
import serviceBase from "@/components/service-base";
import serviceDemand from "@/components/service-demand";
import serviceWorkload from "@/components/service-workload";
// import serviceAnnex from '@/components/service-annex'
import serviceGather from "@/components/service-gather";
import serviceAnalysis from "@/components/service-analysis";
import serviceHardware from "@/components/service-hardware";
import serviceAcceptance from "@/components/service-acceptance";
import serviceOnline from "@/components/service-online";
import { serviceDetail, serviceList } from "@/api/service.js";
import { Toast } from "vant";
import Goback from "@/components/goback.vue";
export default {
  components: {
    serviceBase,
    serviceDemand,
    serviceWorkload,
    // serviceAnnex,
    serviceGather,
    serviceAnalysis,
    serviceHardware,
    serviceAcceptance,
    serviceOnline,
    Goback,
  },
  data() {
    return {
      type: "base",
      id: "",
      baseData: "", //基本信息
      actions: [
        // { name: '流程' },
        { name: "OA流程" },
        { name: "审批记录" },
      ],
      showMoreOpera: false,
      decomposeData: "",
      activeName: "a",
      showTabs: {},
      currentNodeId:'',
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.currentNodeId = this.$route.query.nodeId;
    if (this.id) {
      // this.getNode()
      this.getBase();
    }
    if (localStorage.getItem("type")) {
      this.type = localStorage.getItem("type");
    }
  },
  watch: {
    type(newVal) {
      localStorage.setItem("type", newVal);
    },
  },
  methods: {
    handleMoreOpera() {
      this.showMoreOpera = true;
    },
    onCancel() {
      this.showMoreOpera = false;
    },
    onSelect(active, index) {
      console.log(active, index);
      if (active.name == "审批记录") {
        this.$router.push({
          path: "/service/approvalRecord",
          query: {
            id: this.id,
          },
        });
      } else if (active.name == "OA流程") {
        this.$router.push({
          path: "/service/oaFlow",
          query: {
            id: this.id,
          },
        });
      }
    },
    getNode() {
      serviceList().then((res) => {
        console.log(res);
      });
    },
    getBase() {
      let that = this;
      // console.log(that.id)
      serviceDetail({
        id: that.id,
        node_id:that.currentNodeId
      }).then((res) => {
        res.data.applicant.nameinfo = res.data.applicant.apply_username.slice(
          0,1);
        // console.log(res.data)
        that.baseData = res.data;
        for (var i = 0; i < res.module.length; i++) {
          if (res.module[i] == "requirement_decompose") {
            that.showTabs.requirement_decompose = true;
          } else if (res.module[i] == "workload_assessment") {
            that.showTabs.workload_assessment = true;
          } else if (res.module[i] == "network_hardware") {
            that.showTabs.network_hardware = true;
          } else if (res.module[i] == "system_online") {
            that.showTabs.system_online = true;
          } else if (res.module[i] == "user_check") {
            that.showTabs.user_check = true;
          } else if (res.module[i] == "requirement_analysis") {
            that.showTabs.requirement_analysis = true;
          } else if (res.module[i] == "requirement_statistics") {
            that.showTabs.requirement_statistics = true;
          }
        }
        that.activeName = "g";
      });
    },
    submit() {
      Toast("提交");
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: #f7f9f9;
}
.head {
  .intro {
    background: #009966;
    .apply {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      margin: 0 15px;
      line-height: 35px;
      height: 35px;
      justify-content: space-between;
      .text,
      .time {
        color: #fff;
        font-size: 12px;
      }
    }
    .info {
      display: flex;
      justify-content: space-between;
      padding: 20px 15px 20px 20px;
      .info-base {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .name {
        font-size: 19px;
        font-weight: bold;
        color: #fff;
      }
      .department {
        font-size: 14px;
        color: #fff;
      }
      .phone {
        margin-top: 8px;
        font-size: 13px;
        color: #fff;
      }
      .info-name {
        position: relative;
        font-size: 17px;
        color: #009966;
        line-height: 51px;
        text-align: center;
        width: 51px;
        height: 51px;
        background: #ffffff;
        border-radius: 50%;
        &::after {
          position: absolute;
          top: -5px;
          left: -5px;
          width: 59px;
          height: 59px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.5);
          content: "";
          background: transparent;
        }
      }
    }
  }
  // service-tabs
  .service-tabs {
    display: flex;
    height: 40px;
    margin-bottom: 10px;
    background: #fff;
    .item {
      flex: 1;
      text-align: center;
      line-height: 40px;
      font-size: 13px;
      color: #313541;
      &.active {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        color: #009966;
        &:after {
          position: absolute;
          content: "";
          left: 50%;
          bottom: 0;
          width: 20px;
          height: 1px;
          margin-left: -10px;
          background: #009966;
        }
      }
    }
  }
}

.service-content {
  padding-bottom: 80px;
}
.form-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
  height: 34px;
  padding: 13px 15px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  .btn {
    flex: 1;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    margin-right: 6px;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .btn-color1 {
    background: #ebedf0;
    color: #011445;
  }
  .btn-color3 {
    background: #009966;
    color: #fff;
  }
}
</style>